<template>
	<view class="square-list">
		<view class="square-list-tabs">
			<u-tabs
				:list="tabList"
				:current="tabIndex"
				:is-scroll="tabList.length > 5?true:false"
				@change="tabChange"
				name="type_name"
				active-color="#FFF"
				inactive-color="#4D4D4D"
				:bold="false"
				:active-item-style="{
					backgroundColor: '#141414',
					borderRadius: '48rpx'
				}"
				height="48"
				font-size="28"
				:show-bar="false">
			</u-tabs>
		</view>
		<block v-if="list.length">
			<view class="square-items" v-if="tabIndex < 3">
				<view class="square-item" v-for="(data,index) in list" :key="index" @click="goSquareInfo(data.square_id)">
					<view class="view-times"><u-icon name="eye"></u-icon>{{data.click}}</view>
					<view class="add" v-if="data.is_add==1" @click.stop="add(data.square_id)"><u-icon name="plus" color="#FFF"></u-icon></view>
					<image mode="aspectFill" :src="data.cover_img"></image>
					<view class="square-name">{{data.title}}</view>
					<view class="square-des">{{data.content}}</view>
					<view class="square-user">
						<image :src="data.user.heard_img"></image>{{data.user.nickname}}
					</view>
				</view>
			</view>
			<view class="my-square-items" v-else>
				<view class="my-square-item" v-for="(data,index) in list" :key="index" @click="goSquareInfo(data.square_id)">
					<image :src="data.cover_img"></image>
					<view class="my-square-item-info">
						<view class="my-square-item-name">{{data.title}}</view>
						<view class="my-square-item-des">{{data.content}}</view>
						<view class="my-square-item-des-btn">
							<text>浏览：{{data.click}}</text>
							<view class="btns" @click.stop="showSheetF(data,index)">
								<u-icon name="more-dot-fill" color="#757575" size="40"></u-icon>
							</view>
						</view>
					</view>
				</view>
				<pt-loading-more v-if="loading"></pt-loading-more>
			</view>
		</block>
		<pt-nothing bgColor="#FFF" :isHigh="true" v-else></pt-nothing>
		<u-action-sheet v-model="showSheet" :list="sheetList" border-radius="16" @click="action"></u-action-sheet>
		<view class="my-square-created" @click="createdSquare" v-if="tabIndex < 3">
			<image src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/static/images/other/2022-03-15/20220315/4b00d4e5d4db932506abd9283323d831.png"></image>
		</view>
		<view class="my-square-created-my" @click="createdSquare" v-if="tabIndex == 3">
			<view class="my-square-created-my-btn">
				<image src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/static/images/other/2022-03-15/20220315/c786dcd82ef44fdce7d4e196dc21ed5e.png"></image>
				<text>创建广场</text>
			</view>
		</view>
		<view class="you-like" v-if="showYouLike && tabIndex < 3">
			<view class="title">猜您喜欢</view>
			<view class="you-like-items">
				<view class="you-like-item" v-for="(data,index) in recommentGoodsList" :key="index" @click="goGoodsInfo(data.goods_id,data.goods_type)">
					<image mode="aspectFill" :src="data.image"></image>
					<view class="goods-name">{{data.goods_name}}</view>
					<view class="goods-price">￥<text>{{data.retail_price}}</text></view>
				</view>
			</view>
			<pt-scroll-more 
				text="探索更多" 
				:icon="'https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/index/arrow-orange.png'"
				:width="16"
				:height="22"
				:isBox="true"
				@Func="jumpMore">
			</pt-scroll-more>
		</view>
		<pt-loading></pt-loading>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabIndex: 0,
				tabList: [],
				list: [],
				loading: false,
				noMore: false,
				Refresh: false,
				showYouLike: false,
				page: 0,
				recommentGoodsList: [],
				showSheet: false,
				actionIndex: '',
				actionData: {},
				sheetList: [{
					text: '编辑',
					fontSize: 32,
				},{
					text: '删除',
					color: '#F55959',
					fontSize: 32,
				}]
			};
		},
		onPullDownRefresh() {
			this.Refresh = true
			this.list = []
			this.page = 0
			this.noMore = false
			this.init()
		},
		onReachBottom() {
			if(!this.noMore){
				this.page++
				this.loading = true
				this.init()
			}
		},
		onLoad() {
			this.init()
			this.addFoot('家居广场-列表')
		},
		onShow() {
			
		},
		methods: {
			init(){
				let typeList = this.$u.api.SquareTypeList()
				Promise.all([typeList]).then((res) => {
					this.tabList = res[0].datas
				}).then(res => {
					this.$u.api.SquareList({type_id: this.tabList[this.tabIndex].type_id,page: this.page}).then(res => {
						this.loading = false
						if(res.datas.data.length){
							res.datas.data.forEach(item => {
								this.list.push(item)
							})
						}
						if(res.datas.data.length < 10 || !res.datas.data.length){
							this.noMore = true
							this.getGoodsList()
						}
					}).then(() => {
						if(this.Refresh){
							this.Refresh = false
							uni.stopPullDownRefresh()
							uni.showToast({
								icon: 'none',
								title: '刷新成功'
							})
						}
					})
				});
			},
			getGoodsList(){
				this.$u.api.GoodsList({order_by: 'add_time',asc: 2,limit: 6}).then(res => {
					this.showYouLike = true
					this.recommentGoodsList = res.datas
				})
			},
			tabChange(e){
				this.tabIndex = e
				this.list = []
				this.page = 0
				this.noMore = false
				this.init()
			},
			goSquareInfo(id){
				uni.navigateTo({
					animationDuration: 500,
					url: '/square/square-info?square_id='+id
				})
				this.addFoot('家居广场-'+this.tabList[this.tabIndex].type_name+'-详情',id)
			},
			createdSquare(){
				uni.navigateTo({
					animationDuration: 500,
					url: '/square/square-form'
				})
			},
			showSheetF(data,index){
				console.log(data)
				this.actionIndex = index
				this.actionData = data
				this.showSheet = !this.showSheet
			},
			action(e){
				if(e==0){
					this.edit(this.actionData.square_id)
				}else{
					this.del(this.actionData.square_id,this.actionIndex)
				}
			},
			del(id,index){
				uni.showModal({
					title: '温馨提示',
					content: '是否删除此家居广场？',
					success: (confirm) => {
						if(confirm.confirm){
							this.$u.api.DelSquare({square_id: id}).then(res => {
								this.addFoot('家居广场-列表-我的-删除',id)
								uni.showToast({
									icon: 'none',
									title: '删除成功',
									success: () => {
										this.list.splice(index,1)
									}
								})
							})
						}
					}
				})
			},
			edit(id){
				uni.navigateTo({
					animationDuration: 500,
					url: '/square/square-form?id='+id
				})
				this.addFoot('家居广场-列表-我的-编辑',id)
			},
			jumpMore(){
				uni.navigateTo({
					animationDuration: 500,
					url: '/pages/recommendList/recommendList?is_shelf=true&shelf_id=22'
				})
				this.addFoot('家居广场-列表-猜您喜欢-更多')
			},
			goGoodsInfo(goods_id,goods_type){
				switch (goods_type){
					case 1:
						getApp().goProInfo(goods_id)
						this.addFoot('家居广场-列表-猜您喜欢-商品详情',goods_id)
						break;
				}
			},
			add(square_id){
				uni.showModal({
					title: '温馨提示',
					content: '是否添加此家居广场到我的？',
					success: (confirm) => {
						if(confirm.confirm){
							this.$u.api.SquareTransfer({square_id: square_id}).then(res => {
								uni.showToast({
									icon: 'none',
									title: '添加成功',
								})
								this.addFoot('家居广场-列表-添加到我的')
							})
						}
					}
				})
			},
			// 足迹
			addFoot(where,goods_id,detail){
				this.$u.api.AddFoot({
					// #ifdef MP-WEIXIN
					type: 1,
					// #endif
					// #ifdef APP-PLUS
					type: 2,
					// #endif
					// #ifdef H5
					type: 3,
					// #endif
					store_id: uni.getStorageSync('userInfo')?JSON.parse(uni.getStorageSync('userInfo')).store_id:1,
					client: 1,
					where: where,
					stay_time: 0,
					goods_id: goods_id?goods_id:0,
					store_goods_id: 0,
					is_new: 1,
					detail: detail?detail:''
				})
			},
		}
	}
</script>

<style lang="scss">
	.square-list{
		padding-top: 80rpx;
		.square-list-tabs{
			// border-bottom: solid 1px #F7F7F7;
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			z-index: 20;
			padding: 0 10%;
			padding-top: 30rpx;
			padding-bottom: 30rpx;
			background-color: #FFF;
		}
		.square-items{
			display: flex;
			padding: 0 30rpx 187rpx;
			flex-wrap: wrap;
			.square-item{
				width: 210rpx;
				margin: 30rpx 30rpx 0 0;
				position: relative;
				&:nth-child(3n){
					margin-right: 0;
				}
				.view-times{
					position: absolute;
					top: 10rpx;
					left: 10rpx;
					z-index: 10;
					background-color: rgba(0,0,0,1);
					color: #FFF;
					opacity: .3;
					border-radius: 30rpx;
					padding: 0 10rpx;
					font-size: 20rpx;
					display: flex;
					align-items: center;
					line-height: 32rpx;
					/deep/ .u-icon{
						margin-right: 5rpx;
					}
				}
				.add{
					position: absolute;
					z-index: 10;
					width: 44rpx;
					line-height: 44rpx;
					background: #F59359;
					border-radius: 50%;
					text-align: center;
					top: 188rpx;
					right: 20rpx;
				}
				image{
					width: 210rpx;
					height: 210rpx;
					border-radius: 8rpx;
				}
				.square-name{
					margin-top: 25rpx;
					font-size: 28rpx;
					color: #141414;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
				.square-des{
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					font-size: 22rpx;
					color: #666;
					margin-top: 20rpx;
					line-height: 40rpx;
				}
				.square-user{
					margin-top: 20rpx;
					font-size: 20rpx;
					color: #808080;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					image{
						border-radius: 50%;
						width: 40rpx;
						height: 40rpx;
						margin-right: 15rpx;
					}
				}
			}
		}
		.my-square-items{
			padding-top: 1rpx;
			padding-bottom: 150rpx;
			height: calc(100vh - 108rpx);
			background-color: rgba(247,247,247,1);
			.my-square-item{
				display: flex;
				align-items: center;
				margin: 50rpx 30rpx 0;
				background-color: #FFF;
				padding: 20rpx;
				border-radius: 10rpx;
				image{
					width: 216rpx;
					height: 216rpx;
					border-radius: 8rpx;
				}
				.my-square-item-info{
					flex: 1;
					min-width: 0;
					margin-left: 30rpx;
					position: relative;
					.my-square-item-name{
						font-size: 28rpx;
						color: #141414;
						font-weight: bold;
					}
					.my-square-item-des{
						font-size: 22rpx;
						color: #666;
						margin-top: 20rpx;
					}
					.my-square-item-des-btn{
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-top: 50rpx;
						text{
							color: #666;
							font-size: 22rpx;
						}
						.btns{
							display: flex;
							align-items: center;
							position: absolute;
							right: -20rpx;
							top: 20rpx;
							transform: rotate(90deg);
							view{
								width: 80rpx;
								line-height: 50rpx;
								border-radius: 4rpx;
								font-size: 24rpx;
								&.btns-1{
									text-align: center;
									border: solid 2rpx #F59359;
									color: #F59359;
								}
								&.btns-2{
									text-align: center;
									border: solid 2rpx #141414;
									background-color: #141414;
									color: #FFF;
									margin-left: 20rpx;
								}
							}
						}
					}
				}
			}
		}
		.my-square-created{
			position: fixed;
			bottom: 30rpx;
			left: 50%;
			transform: translateX(-50%);
			// width: 200rpx;
			// height: 80rpx;
			// background: #141414;
			// box-shadow: 0px 3px 18px 0px rgba(40, 34, 31, 0.03);
			// border-radius: 4px;
			color: #FFF;
			font-size: 24rpx;
			text-align: center;
			// line-height: 80rpx;
			z-index: 10;
			image{
				width: 308rpx;
				height: 127rpx;
			}
		}
		.my-square-created-my{
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			height: 120rpx;
			display: flex;
			align-items: center;
			padding: 0 30rpx;
			background-color: #FFF;
			.my-square-created-my-btn{
				flex: 1;
				height: 88rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #141414;
				color: #FFF;
				border-radius: 8rpx;
				image{
					width: 36rpx;
					height: 32rpx;
					margin-right: 10rpx;
				}
			}
		}
		.you-like{
			margin-top: 60rpx;
			padding-bottom: 30rpx;
			.title{
				font-size: 36rpx;
				font-weight: bold;
				color: #141414;
				padding: 0 30rpx;
			}
			.you-like-items{
				display: flex;
				flex-wrap: wrap;
				padding: 0 30rpx 30rpx;
				.you-like-item{
					margin: 30rpx 30rpx 0 0;
					width: 210rpx;
					&:nth-child(3n){
						margin-right: 0;
					}
					image{
						width: 210rpx;
						height: 210rpx;
						border-radius: 8rpx;
					}
					.goods-name{
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						font-size: 24rpx;
						color: #28221F;
						margin-top: 20rpx;
					}
					.goods-price{
						font-size: 22rpx;
						color: #F59359;
						margin-top: 20rpx;
						text{
							font-size: 28rpx;
						}
					}
				}
			}
		}
	}
</style>
